<template>
  <div class="app-container">
    <div class="container-bg">
      <div class="filter-container">
        <!--         <el-input
          v-model="listQuery.name"
          placeholder="姓名"
          style="width: 200px"
          class="filter-item"
          v-if="false"
        /><el-input
          v-if="false"
          v-model="listQuery.tel"
          placeholder="手机"
          style="width: 200px"
          class="filter-item m-margin-l10"
        />
        <el-select
          v-if="false"
          v-model="listQuery.type"
          placeholder="请选择人员类型"
          @change="doGetCommunityPersons"
          class="filter-item m-margin-l10"
        >
          <el-option
            v-for="(v, i) in sTypeArr"
            :key="v.value"
            :label="v.name"
            :value="v.value"
          />
          <el-option key="all" label="所有" value="all" />
        </el-select> -->
        <el-date-picker
          style="width: 380px"
          class="filter-item"
          v-model="dateTime"
          type="datetimerange"
          range-separator="~"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
        <el-button
          class="filter-item m-margin-l10"
          type="primary"
          icon="el-icon-search"
          @click="onSearch"
          >查询
        </el-button>
        <el-button
          class="filter-item m-margin-l10"
          type="warning"
          icon="el-icon-refresh"
          @click="onReset"
          >重置
        </el-button>
        <div style="float: right; display: flex" v-if="isAdmin">
          <el-button
            type="success"
            @click="doDownloadFile"
            :disabled="personData.list&& personData.list.length == 0"
            v-if="false"
            >导出
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delSnapshotBatch" plain
          >批量删除
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delSnapshotAll">全部清除</el-button>

          <!-- <el-button type="primary" @click="uploadDialogVisible = true"
            >上传文件
          </el-button> -->
          <el-button
            v-if="false"
            class="m-margin-l10"
            icon="el-icon-edit"
            type="primary"
            @click="addCommunityPerson"
            >添加人员
          </el-button>
        </div>
      </div>
      <el-table
        :data="personData.list"
        v-loading="loading"
        element-loading-text="正在加载数据，请耐心等待"
        :max-height="640"
        :min-height="500"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column v-if="!isPalmVein" align="center" label="人脸" width="200">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px; border-radius: 50%"
              ref="lazyImg"
              fit="cover"
              :preview-src-list="[localOrigin +scope.row.sPicturePath]"
              :src="localOrigin +scope.row.sPicturePath"
              :key="localOrigin +scope.row.sPicturePath"
              class="vx-lazyLoad"
              lazy
            >
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-loading"></i>加载中
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column v-if="isPalmVein" align="center" label="抓拍记录(掌静脉)">
          <template #default="scope">
            <!-- <img :src="scope.row.sPicturePathl1" data-display-polyfill-info="true">
            <img :src="scope.row.sPicturePathl2" data-display-polyfill-info="true">
            <img :src="scope.row.sPicturePathl3" data-display-polyfill-info="true"> -->
            <div class="pointer" @click="clickBigImgCanvas(scope.row,'left')">
              查看图片
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="类型">
          <template slot-scope="scope">{{ scope.row.sType | sType }}</template>
        </el-table-column> -->
        <el-table-column align="center" label="门禁卡号" v-if="false">
          <template slot-scope="scope">{{
            scope.row.iAccessCardNumber
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="手机号" v-if="false">
          <template slot-scope="scope">{{
            scope.row.sTelephoneNumber
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="性别" v-if="false">
          <template slot-scope="scope">{{
            scope.row.sGender == "male" ? "男" : "女"
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="身份证" v-if="false">
          <template slot-scope="scope">{{
            scope.row.sCertificateNumber
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">{{
            scope.row.iRecoFailedCodeErrorMesg
              ? scope.row.iRecoFailedCodeErrorMesg
              : "识别"
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          class-name="status-col"
          label="创建时间"
          width="300"
        >
          <template slot-scope="scope">{{ scope.row.sTime }}</template>
        </el-table-column>
        <el-table-column
          v-if="isAdmin"
          align="center"
          class-name="status-col"
          label="操作"
        >
          <template slot-scope="{ row, $index }">
            <el-row>
              <el-button
                v-if="false"
                size="mini"
                class="light_blue_btn"
                @click="editCommunityPerson(row, $index)"
                >修改
              </el-button>
              <el-popconfirm
                cancel-button-text="不用了"
                class="m-margin-l10"
                confirm-button-text="好的"
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除当前人员吗？"
                @confirm="doDeleteCommunityPerson"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  class="light_red_btn"
                  @click="deleteCommunityPerson(row)"
                  >删除
                </el-button>
              </el-popconfirm>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :limit.sync="listQuery.limit"
        :page.sync="listQuery.page"
        :total="personData.total"
        :page-sizes="[20, 100, 500]"
        @pagination="changePage"
      />
    </div>

    <!-- 单个添加人员 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="740px"
      title="人员信息"
      :close-on-click-modal="false"
    >
      <el-form
        class="el-form-box"
        ref="dataForm"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="100px"
        style="margin: 0 50px"
      >
        <el-form-item label="姓名" prop="sName">
          <el-input
            v-model="form.sName"
            placeholder="请输入姓名"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="sTelephoneNumber">
          <el-input
            v-model="form.sTelephoneNumber"
            placeholder="请输入手机号码"
          />
        </el-form-item>
        <el-form-item label="身份证" prop="sCertificateNumber">
          <el-input
            v-model="form.sCertificateNumber"
            placeholder="请输入身份证"
          />
        </el-form-item>
        <el-form-item label="证件类型" prop="sCertificateType">
          <el-select
            v-model="form.sCertificateType"
            class="filter-item"
            placeholder="请选择人员证件类型"
          >
            <el-option key="identityCard" label="身份证" value="identityCard" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="sBirthday">
          <el-date-picker
            v-model="form.sBirthday"
            type="date"
            placeholder="选择出生日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="sGender">
          <el-select
            v-model="form.sGender"
            class="filter-item"
            placeholder="请选择人员性别"
          >
            <el-option key="male" label="男" value="male" />
            <el-option key="female" label="女" value="female" />
          </el-select>
        </el-form-item>
        <el-form-item label="人员类型" prop="sType" v-if="false">
          <el-select
            v-model="form.sType"
            class="filter-item"
            placeholder="请选择人员类型"
          >
            <el-option
              v-for="(v, i) in sTypeArr"
              :key="v.value"
              :label="v.name"
              :value="v.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="门禁卡号" prop="iAccessCardNumber" v-if="false">
          <el-input
            v-model="form.iAccessCardNumber"
            type="number"
            class="numrule"
            oninput="if(value.length>20)value=value.slice(0,20)"
            placeholder="请输入门禁卡号"
          />
        </el-form-item>
        <el-form-item label="人脸照片" style="width: 100%">
          <el-upload
            :auto-upload="false"
            :file-list="fileList"
            :limit="1"
            :on-change="getFile"
            :on-remove="handleRemove"
            accept="image/png,image/jpg,image/jpeg"
            action=""
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :class="{ hide: hideUpload }"
          >
            <!-- <el-button size="small" type="primary">选择图片</el-button> -->
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传单个jpg/png/jpeg文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="外部ID" prop="type">
          <el-input v-model="form.extPersonId" placeholder="请输入外部人员ID" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCommunityPersonInfo()"
          >提交
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormToMachineVisible"
      center
      title="同步人脸"
      width="420px"
    >
      <el-form
        ref="dataForm"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="70px"
        style="width: 300px; margin-left: 15px"
      >
        <el-form-item label="门禁" prop="type">
          <el-select
            v-model="toMachinePerson.machineId"
            class="filter-item"
            placeholder="请选择门禁"
          >
            <el-option
              v-for="item in machine.list"
              :key="item.machineId"
              :label="item.machineName"
              :value="item.machineId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormToMachineVisible = false">取消</el-button>
        <el-button type="primary" @click="doToMachine()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" alt="" width="100%" />
    </el-dialog>


    <!--掌静脉-->
    <el-dialog :title="`查看大图 ${detailsItem.sName?'-'+detailsItem.sName:''}`" :visible.sync="dialogBigImg" :close-on-click-modal="false"
               width="70%" :destroy-on-close="true"
               v-if="dialogBigImg">
               <div class="jp2-img2" v-loading="dialogBigImgLoading" v-if="detailsItem.src1.indexOf('jp2')!==-1">
        <div class="score-box">
          <img :src="detailsItem.src1" data-display-polyfill-info="true" alt=""/>

          <!--              <div class="score-item">-->
          <!--                <el-descriptions title="" column="1" :border="true">-->
          <!--                  <el-descriptions-item :label="columns[i]" v-for="(v,i) in detailsItem.score1" key="i">{{v}}</el-descriptions-item>-->
          <!--                </el-descriptions>-->
          <!--              </div>-->
        </div>
        <!--            <div class="score-box">-->
        <!--              <img :src="detailsItem.src2" data-display-polyfill-info="true">-->
        <!--              <div class="score-item">-->
        <!--                <el-descriptions title="" column="1" :border="true">-->
        <!--                  <el-descriptions-item :label="columns[i]" v-for="(v,i) in detailsItem.score2" key="i">{{v}}</el-descriptions-item>-->
        <!--                </el-descriptions>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="score-box">-->
        <!--              <img :src="detailsItem.src3" data-display-polyfill-info="true">-->
        <!--              <div class="score-item">-->
        <!--                <el-descriptions title="" column="1" :border="true">-->
        <!--                  <el-descriptions-item :label="columns[i]" v-for="(v,i) in detailsItem.score3" key="i">{{v}}</el-descriptions-item>-->
        <!--                </el-descriptions>-->
        <!--              </div>-->
        <!--            </div>-->
        <template v-if="falseImgAll">
          <el-empty description="暂无有效图片"/>
        </template>
      </div>
      <div class="jpg-normal" v-else>
          <img v-if="detailsItem.src1.indexOf('jpg')!==-1" :src="detailsItem.src1" alt=""/>
          <img v-if="detailsItem.src1.indexOf('bmp')!==-1" :src="detailsItem.src1" alt=""/>
          <img v-if="detailsItem.src1.indexOf('png')!==-1" :src="detailsItem.src1" alt=""/>
          <img v-if="detailsItem.src1.indexOf('jpeg')!==-1" :src="detailsItem.src1" alt=""/>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import Cookies from 'js-cookie'
import { downloadBoldFile } from "@/api/common";
import {
  getBase64,
  snapshotRecordListApi,
  personsUploadApi,
  addFacePersonsApi,
  editFacePersonsApi,
  delSnapshotRecordListApi,
  del2SnapshotRecordListApi,
  personsUploadZhuapaiApi,
  delSnapshotAllApi,
  delSnapshotBatchApi,
  snapshotRecordExportApi,
  // exportTestApi,
} from "@/api/community/communityPerson";
import { downloadFile } from "@/api/file/file";
import Pagination from "@/components/Pagination";
import FileSaver from "file-saver";
import excelUtil from "@/utils/dealwithExcelUtil.js";
import { cnReg } from "@/utils/validate.js";
import {localOrigin} from "@/utils/validate";
import {getDeviceInfoDetailsApi} from "@/api/network";
import {mapGetters,mapMutations} from 'vuex'


const rules = {
  sName: [
    {
      trigger: ["blur", "change"],
      required: true,
      message: "请输入中文名称",
      pattern: cnReg,
    },
  ],
  sTelephoneNumber: [
    {
      required: false,
      message: "手机号码不能为空",
      trigger: ["blur"],
    },
    // {
    //   pattern: /^1[0-9]\d{9}$/,
    //   message: "请输入正确的号码",
    //   trigger: ["blur"],
    // },
  ],
  sCertificateNumber: [
    {
      trigger: ["blur", "change"],
      required: false,
      message: "请填写身份证信息",
    },
    // {
    //   pattern: /(^\d{18}$)|(^\d{15}$)/,
    //   message: "请输入正确的身份证",
    //   trigger: ["blur", "change"],
    // },
  ],
  sBirthday: [
    {
      trigger: "blur",
      required: false,
      message: "请选择出生日期",
    },
  ],
  iAccessCardNumber: [
    {
      trigger: "blur",
      required: false,
      message: "请输入门禁卡号",
    },
  ],
};

export default {
  name: "CommunityPerson",
  components: { Pagination },
  data: function () {
    return {
      isAdmin:false,
      isPalmVein:false,
      detailsItem: {},
      falseImgAll: false,
      dialogBigImg: false,
      dialogBigImgLoading: false,
      loading: true,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      rules,
      hideUpload: false,
      fit: "contain",
      personData: { list: [], total: 0 },
      listQuery: {
        beginTime: "",
        endTime: "",
        limit: 20,
        page: 1,
        beginPosition: 0,
        endPosition: 19,
      },
      machineQuery: {
        page: 1,
        row: 10,
        communityId: "",
      },
      limitCount: 1,
      form: {},
      selectList: [],
      // 门禁A设备
      machine: {
        list: [],
        total: 0,
      },
      toMachinePerson: {
        id: "",
        machineId: "",
      },
      fileList: [],
      dialogVisible: false,
      dialogFormVisible: false,
      dialogFormToMachineVisible: false,
      dialogImageUrl: "",
      uploadDialogVisible: false,
      fileForm: undefined,
      sTypeArr: [
        { name: "白名单", value: "whiteList" },
        { name: "黑名单", value: "blackList" },
        { name: "访客", value: "tourist" },
      ],
      dateTime: [],
      delItem: {},
    };
  },
  created() {
    this.isAdmin=Cookies.get('roleId')*1>1?false:true
    this.doGetCommunityPersons();
    this.init();
  },
  computed:{
    localOrigin () {
      return location.origin;
    },
    ...mapGetters(["roleId"]),
    
  },
  watch: {
    dialogFormVisible: function (val) {
      if (val === false) {
        this.form = {
          id: "",
          name: "",
          tel: "",
          idNumber: "",
          type: "",
          sPicturePath: "",
        };
        this.fileList = [];
      }
    },
  },
  filters: {
    sType(val) {
      switch (val) {
        case "whiteList":
          return "白名单";
        case "blackList":
          return "黑名单";
        default:
          return "访客";
      }
    },
  },
  methods: {
    changePage(val) {
      let [page, limit] = [val.page, val.limit];
      this.listQuery.beginPosition = page * limit - limit;
      this.listQuery.endPosition = page * limit - 1;
      this.doGetCommunityPersons();
    },
    doGetCommunityPersons() {
      this.loading = true;
      // this.listQuery.page = 0
      this.listQuery.minAge = 0;
      this.listQuery.maxAge = 100;
      this.listQuery.beginTime =
        this.dateTime && this.dateTime[0]
          ? this.dateTime[0]
          : "1970-01-01 00:00:00";
      this.listQuery.endTime =
        this.dateTime && this.dateTime[1]
          ? this.dateTime[1]
          : this.$moment(this.$moment().endOf("day").unix() * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
      this.listQuery.beginTime = this.$moment(this.listQuery.beginTime).unix().toString();
      this.listQuery.endTime = this.$moment(this.listQuery.endTime).unix().toString();
      snapshotRecordListApi(this.listQuery).then((response) => {
        this.loading = false;
        this.personData = {
          list: response.matchList,
          total: response.numOfMatches,
        };
        response.matchList.forEach((item) => {
          item.sPicturePath = item.sPicturePath + "?" + new Date().getTime();
          item.sTime = this.$moment(item.sTime * 1000).format("YYYY-MM-DD HH:mm:ss");
        });
      });
    },
    onSearch() {
      this.listQuery.page = 1
      this.listQuery.limit = 20
      this.doGetCommunityPersons();
    },
    onReset() {
      this.personData.list = [];
      this.personData.total = 0;
      this.listQuery = {
        beginTime: "",
        endTime: "",
        limit: 20,
        page: 1,
        beginPosition: 0,
        endPosition: 19,
      };
      this.dateTime = [];
      this.doGetCommunityPersons();
    },
    reset() {
      this.resetForm("form");
      this.form = {
        sCertificateType: "identityCard",
        sGender: "male",
        sType: "whiteList",
        iAccessCardNumber: 0,
      };
      this.fileForm = undefined;
    },
    handleSelectionChange(value) {
      this.selectList = [];
      for (let i = 0; i < value.length; i++) {
        this.selectList.push({ id: value[i].id });
      }
      // console.log(this.selectList);
    },
    addCommunityPerson() {
      this.dialogFormVisible = true;
      this.hideUpload = false;
      this.reset();
    },
    deleteCommunityPerson(_row) {
      this.selectList = [{ id: _row.id }];
      this.delItem = _row;
    },
    doDeleteCommunityPerson() {
      // console.log(this.delItem);
      if (this.delItem.id) {
        delSnapshotRecordListApi(this.delItem.id)
          .then((res) => {
            // this.del2SnapshotRecordList();
            this.doGetCommunityPersons();
            this.$message.success("删除成功");
          })
          .catch((err) => {
            // this.del2SnapshotRecordList();
            this.doGetCommunityPersons();
          });
      }
    },
    // 二次删除
    del2SnapshotRecordList() {
      let name = this.delItem.sSnapshotName.split("/");
      let data = {
        name: [name.pop()],
        type: "snapshot",
      };
      del2SnapshotRecordListApi(data).then((res) => {
        this.$message.success("删除成功");
        this.doGetCommunityPersons();
        this.selectList = [];
        this.delItem = {};
      });
    },
    delSnapshotAll() {
      this.$confirm("此操作将永久删除所有记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delSnapshotAllApi().then((res) => {
            this.$message.success("删除成功");
            this.doGetCommunityPersons();
          });
        })
        .catch(() => {
          // this.$message.info("已取消删除");
        });
    },
    delSnapshotBatch() {
      if (!this.selectList || this.selectList.length === 0) {
        this.$message.warning("请选择删除记录");
        return;
      }
      // console.log(this.selectList);
      let params = {
        id: [],
      };
      this.selectList.map((item) => {
        params.id.push(item.id);
      });
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, `此操作将永久删除所选`),
          h("i", { style: "color: #f00" }, this.selectList.length),
          h("span", null, "个记录, 是否继续?"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            console.log("1111");
            done();
          } else {
            done();
          }
        },
      }).then((action) => {
        delSnapshotBatchApi(params).then((res) => {
          this.$message.success("删除成功");
          this.doGetCommunityPersons();
        });
      });

      return false;
      this.$confirm("此操作将永久删除所选记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delSnapshotBatchApi(params).then((res) => {
            this.$message.success("删除成功");
            this.doGetCommunityPersons();
          });
        })
        .catch(() => {
          // this.$message.info("已取消删除");
        });
    },
    // 修改
    editCommunityPerson(_row, _index) {
      this.reset();
      this.dialogFormVisible = true;
      this.delItem = _row;
      this.form = {
        iAccessCardNumber: 0,
        sAddress: "",
        sBirthday: "1970-01-01",
        sCertificateNumber: "",
        sCertificateType: "identityCard",
        sGender: "male",
        sHometown: "",
        sListType: "permanent",
        sName: "",
        sNation: "汉族",
        sNote: "undone",
        sTelephoneNumber: "",
        sType: "whiteList",
      };
      this.fileForm = 1;
      this.fileList = [
        {
          name: "图片",
          url: _row.sPicturePath,
        },
      ];
      if (_row.sPicturePath) {
        this.fileList = [
          {
            name: "图片",
            url: _row.sPicturePath,
          },
        ];
        this.hideUpload = true;
      } else {
        this.hideUpload = false;
      }
    },
    saveCommunityPersonInfo() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          // let other = {"sAddress":"","sHometown":"","sListType":"permanent","sNation":"汉族","sNote":"undone","iFaceDBId":-2}
          // this.form = Object.assign({},this.form,other);
          if (!this.fileForm) {
            this.msgError("请上传头像");
            return false;
          }
          // 先添加后修改
          this.form.sNote = "undone";
          addFacePersonsApi(this.form).then((response) => {
            let oldPath = response.sPicturePath;
            let oldId = response.id;
            // this.uploadFileImg(response.sPicturePath)
            personsUploadZhuapaiApi(
              { path: this.delItem.sSnapshotName },
              oldPath
            ).then((res) => {
              this.form.sNote = "";
              editFacePersonsApi(this.form, oldId).then((response) => {
                this.dialogFormVisible = false;
                this.$message.success("修改成功");
                this.doGetCommunityPersons();
              });
            });
          });
        } else {
          console.log(valid);
        }
      });
    },
    // 同时提交图片
    uploadFileImg(path) {
      let formData = new FormData();
      formData.append("file", this.fileForm);
      personsUploadApi(formData, path)
        .then((response) => {})
        .catch((err) => {
          this.dialogFormVisible = false;
          this.$nextTick(() => {
            this.doGetCommunityPersons();
          });
        });
    },
    doDownloadFile() {
      let params = {
        beginTime: "",
        endTime: "",
        page: -1,
        limit: -1,
      };
      /*       exportTestApi().then((res) => {
        console.log(res);
      });
      */
      // return false;
      snapshotRecordExportApi(params).then((res) => {
        // console.log(res);
        let downLoadfile = process.env.VUE_APP_BASE_URL + res.url;
        // console.log(downLoadfile);
        this.download(downLoadfile, new Date().getTime());
        return false;
        downloadBoldFile(res.data, "抓拍记录.xlsx").then(() => {
          this.$message.success("下载成功!");
        });
      });
    },
    download(href, title) {
      const a = document.createElement("a");
      a.setAttribute("href", href);
      a.setAttribute("download", title);
      a.click();
    },
    getFile(file, fileList) {
      this.fileForm = file.raw;
      // let _that = this;
      // getBase64(file.raw).then((res) => {
      //   _that.form.photo = res;
      // });
      // this.hideUpload = fileList.length >= this.limitCount;
    },
    handleRemove(file, fileList) {
      this.fileForm = undefined;
      this.hideUpload = fileList.length >= this.limitCount;
      this.form.photo = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 点击canvas 查看大图
    clickBigImgCanvas(item, type) {
      console.log('localOrigin',localOrigin)
      this.detailsItem = item;
      this.falseImgAll = false;
      this.dialogBigImg = true;
      this.dialogBigImgLoading = true;
      if (type == 'left') {
        // console.log('localOrigin',localOrigin)
        console.log('left', item)
        this.detailsItem.src1 = process.env.VUE_APP_BASE_URL + item.sPicturePath;
        // this.detailsItem.src1 = 'http://192.168.30.144:91/userdata/snapshot/log1.jp2';
        // this.detailsItem.src2 = item.sPicturePathl2;
        // this.detailsItem.src3 = localOrigin +item.sPicturePath;
        // this.detailsItem.score1 = item.sPicturel1Score;
        // this.detailsItem.score2 = item.sPicturel2Score;
        // this.detailsItem.score3 = item.sPicturel3Score;
      } else {
        console.log('right', item)
        this.detailsItem.src1 = process.env.VUE_APP_BASE_URL + item.identityData;
        // this.detailsItem.src2 = item.sPicturePathr2;
        // this.detailsItem.src3 = item.sPicturePathr3;
        // this.detailsItem.score1 = item.sPicturer1Score;
        // this.detailsItem.score2 = item.sPicturer2Score;
        // this.detailsItem.score3 = item.sPicturer3Score;
      }
      this.$nextTick(() => {
        this.asyncJp2();
        setTimeout(() => {
          this.dialogBigImgLoading = false;
          let canvas = document.querySelectorAll('.jp2-img2 canvas');
          console.log('canvas', canvas)
          let flag = []
          for (let index = 0; index < canvas.length; index++) {
            flag.push(canvas[index].getAttribute('is-false-img'))
          }
          // 全部错误图片
          this.falseImgAll = flag.every(item => {
            return item === 'true'
          })
        }, 3000)
      })
    },
    // 加载jp2 转canvas 脚本
    asyncJp2() {
      console.log('asyncJp2')
      const s = document.createElement('script');
      s.type = 'text/JavaScript';
      s.setAttribute("data-callType", "callScript")
      s.src = './html/jp2-polyfill.js';
      // console.log('s',s)
      document.head.appendChild(s);
    },

    init() {
      getDeviceInfoDetailsApi().then(res => {
        // console.log('get',res.deviceType.deviceType.value)
        if (res.deviceType.deviceType.value == "PalmVein") {
          console.log("PalmVein")
          this.isPalmVein = true
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>

.jp2-img2,.jpg-normal {
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/ .hide .el-upload--picture-card {
  display: none;
}
.el-form-box {
  /deep/ {
    .numrule input::-webkit-outer-spin-button,
    .numrule input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }
    .numrule input[type="number"] {
      -moz-appearance: textfield;
    }
  }
}

.image-slot {
  margin-top: 20px;
}
</style>
